<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  mHeight: {
    type: String,
    default: '100%',
  },
});

// 预定义的背景列表
const backgrounds = [
  { gradient: 'linear-gradient(135deg, #1e3c72, #2a5298)', color: 'white' }, // 蓝色
  { gradient: 'linear-gradient(135deg, #00b09b, #96c93d)', color: 'white' }, // 绿色
  { gradient: 'linear-gradient(135deg, #ff416c, #ff4b2b)', color: 'white' }, // 红色
  { gradient: 'linear-gradient(135deg, #6a11cb, #2575fc)', color: 'white' }, // 紫色
  { gradient: 'linear-gradient(135deg, #ff9a9e, #fad0c4)', color: 'white' }, // 粉色
  { gradient: 'linear-gradient(135deg, #ff7e5f, #feb47b)', color: 'white' }, // 橙色
  { gradient: 'linear-gradient(135deg, #00cdac, #02aab0)', color: 'white' }, // 青绿色
  { gradient: 'linear-gradient(135deg, #ffd700, #daa520)', color: 'white' }, // 金色
  { gradient: 'linear-gradient(135deg, #00ffff, #00ced1)', color: 'white' }, // 青色
  { gradient: 'linear-gradient(135deg, #1a1a1a, #333333)', color: 'white' }, // 暗黑
  { gradient: 'linear-gradient(135deg, #f5f7fa, #c3cfe2)', color: '#333' }, // 明亮
];

// 随机选择一个背景
const randomBackground = ref(null);

const getRandomBackground = () => {
  const randomIndex = Math.floor(Math.random() * backgrounds.length);
  randomBackground.value = backgrounds[randomIndex];
};

// 在组件挂载时生成随机背景
onMounted(() => {
  getRandomBackground();
});

// 动态注入全局样式
const injectGlobalStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body, html { height: 100%; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; overflow-y: hidden; }
  `;
  document.head.appendChild(style);
};

injectGlobalStyles();
</script>

<template>
  <div
      class="bg-tech-random"
      :style="{
      background: randomBackground?.gradient,
      color: randomBackground?.color,
      minHeight: mHeight,
    }"
  >
    <slot></slot>
  </div>
</template>

<style scoped>
.bg-tech-random {
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  position: relative;
  overflow-y: auto;
}

/* 美化滚动条 */
.bg-tech-random::-webkit-scrollbar { width: 10px; }
.bg-tech-random::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.bg-tech-random::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 5px; transition: background 0.3s ease; }
.bg-tech-random::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
</style>